
import {getStuList,addStudentApi,freezeStuApi} from '../../api/student.js'
import {useState,useEffect} from 'react'
import { Input,Button ,Table, Tag, Space ,Pagination,message} from 'antd';

import { GithubOutlined } from '@ant-design/icons';
import './index.css'
function Student(){
	var [stuList,setStu]=useState([]); //学员列表数据
	var [count,setCount]=useState(0)//总数据条数
	var [pageSize,setPageSize]=useState(3)//总数据条数
	var [page,setPage]=useState(1)//当前页码
	
	var [seaUser,setSeaUser]=useState("") //搜索用的用户名
	var [seaEmail,setSeaEmail]=useState("")//搜索使用的邮箱
	var [seaPhone,setSeaPhone]=useState("")//搜索需要的手机号
		// 获取学员列表
		useEffect(()=>{
			getList();
		},[]) //[] 只在挂载和卸载时候执行
	 function getList(){
		 console.log(seaEmail)
		 console.log(page)
			getStuList({
				pageStart:page,
				userName:seaUser,
				phone:seaPhone,
				email:seaEmail
			}).then(res=>{
				console.log(res)
				stuList=res.data.data.list;
				setCount(res.data.data.count);
				setPageSize(res.data.data.pageSize)
				setStu([...stuList])
			})
		}
//   17.0.2

	// 表格表头需要的数据
	// render 自定义渲染 单元格内容
	const columns = [
	  {
	    title: '用户名',
	    dataIndex: 'userName',
	    key: 'userName',
	    render: text => <h1>{text}</h1>,
	  },
	  {
	    title: '邮箱',
	    dataIndex: 'email',
	    key: 'email',
	  },
	  {
	    title: '手机号',
	    dataIndex: 'phone',
	    key: 'phone',
	  },
	  {
	    title: '注册时间',
	    key: 'createAt',
	    dataIndex: 'createAt',
		render:text=>{
			return new Date(text).toLocaleString()
		}
	  },
	  {
	    title: '状态',
	    key: 'isstate',
		dataIndex:"isstate",
		render:(text,row)=>{
			// console.log(text)//当前单元格数据
			// console.log(row)//当前行数据
			return <a>{text?'已冻结':'可用'}</a>
		}
	  },
	  {
		  title:"操作",
		  key:"isstate",
		  render:row=>{
			  // console.log(row)
			return  <Button onClick={()=>freeze(row.tokenId)}   type={row.isstate?'primary':'danger'}>
					{row.isstate?'解冻':'冻结'}
				</Button>
			}
	  }
	];
	// 冻结学员
	async function freeze(tokenid){
			console.log(tokenid)
		var res=await freezeStuApi(tokenid)
		message.info("操作成功")
		getList();
	}
	
	// 分页改变方法
	function pageChange(nowpage,pageSize){
			console.log(nowpage,pageSize)
			page=nowpage;
			setPage(page)//改变当前页码
			getList()//分页改变 从新获取数据
	}
	var [addemail,setEmail] =useState("")
	var [adduserName,setUser] =useState("")
	var [addphone,setPhone] =useState("")
	async function addStu(){ //添加学员
			var res=await addStudentApi({
				addemail:addemail,
				adduserName:adduserName,
				addphone:addphone
			})
			console.log(res)
			message.info("添加成功")
			getList();
			// 清空输入框
			setUser("")
			setEmail("")
			setPhone("")
	}
	function addChange(e){//收集输入框的值
		// e.target.value
		if(e.target.getAttribute("mytype")=="adduserName"){
			adduserName=e.target.value
			setUser(adduserName)
		}else if(e.target.getAttribute("mytype")=="addemail"){
			addemail=e.target.value;
			setEmail(addemail)
		}else if(e.target.getAttribute("mytype")=="addphone"){
			addphone=e.target.value;
			setPhone(addphone)
		}
	}
	// 搜索需要的数据收集
	function useChange(e){
		seaUser=e.target.value;
		setSeaUser(seaUser)
	}
	function emailChange(e){
		seaEmail=e.target.value;
		setSeaEmail(seaEmail)
	}
	function phoneChange(e){
		seaPhone=e.target.value;
		setSeaPhone(seaPhone)
	}

	return (
		<div>
			<h1>学员模块</h1>
			<div className="search_wrap">
			  <Input onChange={useChange}  value={seaUser}  placeholder="用户名" />
			  <Input  onChange={emailChange} value={seaEmail}   placeholder="邮箱" />
			  <Input onChange={phoneChange} value={seaPhone}   placeholder="手机号"  />
			  <Button danger onClick={getList} type="success">查询</Button>
  			</div>
			<div className="search_wrap">
			 <Input onChange={addChange}  mytype="adduserName" value={adduserName}  placeholder="用户名" />
			 <Input onChange={addChange}  mytype="addemail" value={addemail} placeholder="邮箱" />
			 <Input onChange={addChange}  mytype="addphone" value={addphone} placeholder="手机号"  />
			  <Button danger type="success" onClick={addStu}>添加</Button>
			</div>
			<div className="tab_title">
				<GithubOutlined />
				<div>学员管理</div>	
			</div>
			<div className="tab_wrap">
				<Table pagination={{ position: ["none", "none"] }} columns={columns} dataSource={stuList} />,
				<Pagination onChange={pageChange} current={page} defaultPageSize={pageSize} defaultCurrent={page} total={count} />
			</div>
		
		</div>
	)
}
export default Student